import { debounce, useQuasar } from '@teld/q-components';
import * as echarts from 'echarts';
import { parseOption } from 't/common/chart/parseData';
import { createNameSpace } from 't/common/utils';
import {
  defineComponent,
  onMounted,
  onUnmounted,
  ref,
  toRaw,
  watch,
} from 'vue';
import { EleResize } from './eleResize';
import styles from './index.module.scss';
import NoDataPlaceholder from 't/bussiness/data-grid/components/no-data-placeholder.vue';


export default defineComponent({
  name: createNameSpace('chart'),
  props: {
    option: {
      type: Object,
      default() {
        return null;
      },
    },
    data: {
      type: Array,
      default() {
        return null;
      },
    },
    type: String,
    visible: {
      type: Boolean,
      default() {
        return true;
      },
    },
    enableNoDataPlaceholder:{
      type: Boolean,
      default() {
        return false;
      },
    }
  },

  emits: ['click'],

  setup(props, { attrs, emit, expose, slots }) {
    const chartRef = ref();
    let myChart;
    const currentEchart = ref();
    const $q = useQuasar();

    const handleResize = debounce(function () {
      currentEchart.value?.resize();
    }, 100 /*ms to wait*/);

    onMounted(() => {
      myChart = echarts.init(chartRef.value);
      chartRef.value.parentNode.tabIndex = -1;

      currentEchart.value = myChart;
      window.addEventListener('resize', handleResize);
    });
    onUnmounted(() => {
      myChart.dispose?.();
      window.removeEventListener('resize', handleResize);
    });

    expose({ currentEchart });

    function setOption(params) {


      const { option, data } = params ?? {};

      const o = parseOption({
        option: toRaw(option),
        data: toRaw(data),
        type: props.type,
      });
      if (o.xAxis) {
      o.xAxis.forEach(item => {
        let _size = 999 //默认显示6个字
        if (item.axisLabel.fontLength) {
          _size = item.axisLabel.fontLength
        }
        item.axisLabel["formatter"] = (value, index) => {
          let _v = value + ""
          if (_v.length > _size) {
            value = _v.substring(0, _size) + '...'
          }
          return value
        }
      })
      }
      if (o.yAxis) {
      o.yAxis.forEach(item => {
        let _size = 999 //默认显示6个字
        if (item.axisLabel.fontLength) {
          _size = item.axisLabel.fontLength
        }
        item.axisLabel["formatter"] = (value, index) => {
          let _v = value + ""
          if (_v.length > _size) {
            value = _v.substring(0, _size) + '...'
          }
          return value
        }
      })

      }
      myChart?.setOption?.(o);
      myChart?.resize?.();
      const listener = function () {
        myChart.resize();
         };
      EleResize.on(chartRef.value, listener);
    }

    watch(
      () => [props.option, props.data, chartRef.value],
      (a, b) => {
        const [option, data, chartDom] = a;
        if (chartDom) {
          setOption({ option, data });
        }
      },
      {
        immediate: true,
        deep: true,
      },
    );

    watch(
      () => props.visible,
      () => {
        if (props.visible == true) {
          handleResize();
        }

      },

    );


    const visible = () => {
      return (
        <>
          {props.enableNoDataPlaceholder && (
            <div
              v-show={props.data.length == 0}
              style='height:100%;display: flex;justify-content: center;align-items: center;'
            >
              <NoDataPlaceholder
                text={$q.lang?.dataGrid?.emptyText}
              ></NoDataPlaceholder>
            </div>
          )}
          {rChart()}
        </>
      );
    };
     const rChart = () => {
       return (
         <div
           {...attrs}
           ref={chartRef}
           class={styles.module}
           style={{
             width: attrs.width,
             height: attrs.height,
             minHeight: attrs.height,
           }}
           visible={props.visible}
         ></div>
       );
     };
    return () => {
      return props.visible ? visible() : rChart();
    };
  },
});
